<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE HTML>
<html lang="zh">
<head>
<%@include file="/WEB-INF/jsp/common/header.jsp"%>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/My97DatePicker/WdatePicker.js"></script>
<style type="text/css">
    td ul.demo-btns i {color: #e5e5e5;padding: 0 10px;font-style: normal;}
    td ul.demo-btns a.editATxts, a.editATxts {color:#6eb1d4;}
    td ul.demo-btns a.disabledATxts {color:#8c8c8c;}
    td ul.demo-btns a.deleteATxts {color:#ff6969;}
    td ul.demo-btns a.infoATxts {color:#2e9f76;}
    #relayDiv a{margin-bottom: 5px; margin-left: 2px;}
</style>
<script type="text/javascript">
	var petListTable;
	$(document).ready(function() {
		$("#resetForm").click(function() {
			$("#form input").val("");
		});
		$("#save").click(function() {
			var id = $("#editModal input[name=id]").val();
            var remark = $("#editModal textarea[name=remark]").val();

			if (remark.length > 255) {
				$.messager.alert("备注不能超过255个字符");
				return false;
			}
			var url = contextpath + "/web/relay/update";
			$(this).attr("disabled","disabled");
			$.ajax({
				type : "POST",
				url : url,
				data : $('#editForm').serialize(),
				success : function(result) {
                    if (result.code === 200) {
                        $("#save").removeAttr("disabled");
                        $("#editModal").modal("hide");
                        $.messager.alert("提示", "保存成功");
                        petListTable.ajax.reload(null, false);
                    } else {
                        $.messager.alert("数据保存失败", result.msg);
                    }
				}
			});
		});

		$('#timeSettingBtn').click(function(){
            var value = $("#settingModal :input[name='dataOptions[0].value']").val();
            if(value === '') {
                $.messager.alert("提示", "预约时间必填");
                return;
            }
            $(this).attr("disabled","disabled");
            $("#settingModal :input[name='dataOptions[0].value']").val(value.replace(/ /g, "").replace(/；/g, ";"));
            $.ajax({
                type : "POST",
                url : contextpath + "/web/option/saveList",
                data : $('#settingForm').serialize(),
                success : function(result) {
                    $('#timeSettingBtn').removeAttr("disabled");
                    if (result.code === 200) {
                        $("#settingModal").modal("hide");
                        $.messager.alert("提示", "保存成功");
                        petListTable.ajax.reload(null, false);
                    } else {
                        $.messager.alert("数据保存失败", result.msg);
                    }
                }
            });
        });

        petListTable = $('#petListTable').DataTable({
            "bSort": true, //是否启动各个字段的排序功能
            "aaSorting": [[6, "desc"]], //默认的排序方式
            "aoColumns": [
                {
                    "mDataProp": "petName",
                    "sTitle":"宠物名称",
                    "sDefaultContent": "--",
                    "sWidth": "20%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : true,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },
                {
                    "mDataProp": "userName",
                    "sTitle":"主人",
                    "sDefaultContent": "--",
                    "sWidth": "20%",
                    "sClass": "center",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },{
                    "mDataProp": "relayType",
                    "sTitle":"预约类型",
                    "sDefaultContent": "--",
                    "sWidth": "15%",
                    "sClass": "center",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData === 1){
                            $(nTd).html('接');
                        }else{
                            $(nTd).html('送');
                        }
                    }
                },
                {
                    "mDataProp": "relayDay",
                    "sTitle":"预约日期",
                    "sDefaultContent": "--",
                    "sWidth": "15%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') {
                            sData = sData.substr(0, 10);
                            $(nTd).html(sData);
                            $(nTd).attr('title', sData);
                        }
                    }
                },{
                    "mDataProp": "timeInterval",
                    "sTitle":"预约时段",
                    "sDefaultContent": "--",
                    "sWidth": "15%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') {
                            $(nTd).attr('title', sData);
                        }
                    }
                },{
                    "mDataProp": "dealFlag",
                    "sTitle": "状态",
                    "sWidth": "15%",
                    "sDefaultContent": "--",
                    "bSortable": false,
                    "sClass": "center flow",
                    "bSearchable": false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if (sData === 0) $(nTd).html('未处理');
                        else $(nTd).html('已处理');
                    }
                },
                {
                    "mDataProp": "createTime",
                    "sTitle": "创建时间",
                    "sWidth": "20%",
                    "sDefaultContent": "--",
                    "bSortable": true,
                    "sClass": "center flow",
                    "bSearchable": false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if (sData !== '--') $(nTd).attr('title', sData);
                    }
                },
                {
                    "mDataProp": "id",
                    "sTitle": "操作",
                    "sWidth": "100px",
                    "sClass": "center flow",
                    "bSearchable": false,
                    "bSortable": false,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<a class='btn btn-xs btn-default' href='javascript:void(0);' onclick='editRelay(" + iRow + ")'><i class='fa fa-pencil'></i>&nbsp;编辑</a> ");
                    }
                }
            ],
            "ajax": {
                url: contextpath + '/web/relay/queryPage',
                type:"post",
                data: function(data){
                    $.xDataTablesParams(data, $.trim($('#name').val()));
                    data['search.dealFlag'] = $('#status_select').val();
                    return data;
                }
            }
        });

        $('#editModal').on('hide.bs.modal', function () {
            $('#editForm :input').val('');
            $('#save').removeAttr("disabled");
        });


    });

    function editRelay(row){
        $('#modalTitle').text('处理预约信息');
        var rowData = petListTable.row(row).data();
        if(!rowData.price) rowData.price = 0;
        $('#editModal :input[name=id]').val(rowData.id);
        $('#editModal select[name=dealFlag]').val(rowData.dealFlag);
        $('#editModal :input[name=remark]').val(rowData.remark);
        $('#editModal').modal('show');
    }

    function searchTable(){
        petListTable.ajax.reload();
    }

    function removeNoRelayDate(id) {
        $.ajax({
            type : "POST",
            url : contextpath + "/web/relay/deleteNoRelayDate",
            data : {'id':id},
            success : function(result) {
                if (result.code === 200) {
                    $('#relayBtn_' + id).remove();
                } else {
                    $.messager.alert("数据保存失败", result.msg);
                }
            },
            error : function(){
                $.messager.alert("提示", '数据保存失败，请重试');
            }
        });
    }

    function relayDateChange(dp){
        if (dp.cal.getDateStr() === dp.cal.oldValue) {
            return;
        }
        $.ajax({
            type : "POST",
            url : contextpath + "/web/relay/insertRelayDate",
            data : {'date':dp.cal.getDateStr()},
            success : function(result) {
                if (result.code === 200) {
                    var data = result.data;
                    data.relayDate = data.relayDate.substr(0, 10);
                    $('#relayDiv').append('<a id="relayBtn_'+ data.id +'" href="javascript:removeNoRelayDate('+ data.id +');" class="btn btn-sm btn-info btn-label"> '+ data.relayDate +' <i class="fa fa-times"></i></a> ');
                } else {
                    $.messager.alert("数据保存失败", result.msg);
                }
            },
            error : function(){
                $.messager.alert("提示", '数据保存失败，请重试');
            }
        });
    }
</script>
</head>
<body>
	<div class="container-fluid">
		<div class="sub-header">
			<h2>预约列表</h2>
		</div>
		<form id="form" class="form-inline" role="form" action="#" method="post" style="margin-bottom: 10px; margin-top: 10px;">
			<div class="form-group">
				<div class="input-group">
					<span class="input-group-addon">宠物名称</span>
					<input type="text" class="form-control" id="name" placeholder="名称" style="width: 150px;">
				</div>
			</div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">状态</span>
                    <select id="status_select" class="form-control">
                        <option value="" selected>全部</option>
                        <option value="0">未处理</option>
                        <option value="1">已处理</option>
                    </select>
                </div>
            </div>
			<button type="button" class="btn btn-default" onclick="searchTable()">查询</button>
            <button type="button" class="btn btn-info" onclick="$('#settingModal').modal('show')">预约时间段设置</button>
            <button type="button" class="btn btn-primary" onclick="$('#noRelayDateModal').modal('show')">不可预约日期设置</button>
		</form>
		<div>
			<table class="table table-hover table-striped table-bordered" style="table-layout:fixed;" id="petListTable"></table>
		</div>
	</div>

	<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 600px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="modalTitle">宠物信息</h4>
				</div>
				<div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" name="id">
                        <table id="editTable" class="table-hover table table-bordered">
                            <tr>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon addForm">状态</span>
                                        <select name="dealFlag" class="form-control" style="width: 320px;">
                                            <option value="0">未处理</option>
                                            <option value="1">已处理</option>
                                        </select>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon">备注</span>
                                        <textarea class="form-control" name="remark" rows="3" placeholder="备注"></textarea>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" colspan="2">
                                    <button id="save" type="button" class="btn btn-success addForm">保 存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button id="closeModal" type="button" onclick="$('#editModal').modal('hide');" class="btn btn-danger addForm">关闭</button>
                                </td>
                            </tr>
                        </table>
                    </form>
				</div>
			</div>
		</div>
	</div>

    <div class="modal fade" id="settingModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width: 600px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">预约时间设置</h4>
                </div>
                <div class="modal-body">
                    <form id="settingForm">
                        <input type="hidden" name="id">
                        <table id="settingTable" class="table-hover table table-bordered">
                            <tr>
                                <td style="width:120px;background:#eee;text-align: center;">预约时间：</td>
                                <td>
                                    <input type="hidden" name="dataOptions[0].id" value="${relayTimes.id}">
                                    <input type="hidden" name="dataOptions[0].userId" value="-1">
                                    <input type="hidden" name="dataOptions[0].dataOptionId" value="${relayTimes.dataOptionId}">
                                    <input type="text" class="form-control" name="dataOptions[0].value" value="${relayTimes.value}" style="width: 320px;"/>
                                    <p class="help-block">多个时间段“逗号”相隔</p>
                                </td>
                            </tr>
                            <c:forEach items="${weekdays}" var="item" varStatus="vs">
                                <tr>
                                    <td style="width:120px;background:#eee;text-align: center;">${item.dataName}：</td>
                                    <td>
                                        <input type="hidden" name="dataOptions[${vs.index + 1}].id" value="${item.id}">
                                        <input type="hidden" name="dataOptions[${vs.index + 1}].userId" value="-1">
                                        <input type="hidden" name="dataOptions[${vs.index + 1}].dataOptionId" value="${item.dataOptionId}">
                                        <div class="radio" style="margin-top:0; padding-top:0; margin-bottom: 5px;">
                                            <label><input type="radio" name="dataOptions[${vs.index + 1}].value" value="1" <c:if test='${item.value eq "1"}'>checked="checked"</c:if>>
                                                可以预约</label>&nbsp;&nbsp;
                                            <label><input type="radio" name="dataOptions[${vs.index + 1}].value" value="0" <c:if test='${item.value eq "0"}'>checked="checked"</c:if>>
                                                不可预约</label>&nbsp;&nbsp;
                                        </div>
                                    </td>
                                </tr>
                            </c:forEach>
                            <tr>
                                <td align="center" colspan="2">
                                    <button id="timeSettingBtn" type="button" class="btn btn-success addForm">保 存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="button" onclick="$('#settingModal').modal('hide');" class="btn btn-danger addForm">关闭</button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="noRelayDateModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width: 600px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">预约时间设置</h4>
                </div>
                <div class="modal-body">
                    <form id="noRelayDateForm">
                        <input type="hidden" name="id">
                        <table id="noRelayDateTable" class="table-hover table table-bordered">
                            <tr>
                                <td style="width:120px;background:#eee;text-align: center;">预约时间：</td>
                                <td>
                                    <input type="text" class="form-control" id="addRelayDate"
                                           onfocus="WdatePicker({minDate:'%y-%M-%d', dateFmt: 'yyyy-MM-dd', 'onpicked':relayDateChange})" style="width: 320px;"/>
                                </td>
                            </tr>
                            <tr>
                                <td style="width:120px;background:#eee;text-align: center;">&nbsp;</td>
                                <td id="relayDiv">
                                    <c:forEach items="${noRelayDateList}" var="item" varStatus="vs">
                                        <a id="relayBtn_${item.id}" href="javascript:removeNoRelayDate(${item.id});"
                                           class="btn btn-sm btn-info btn-label"><fmt:formatDate value="${item.relayDate}" pattern="yyyy-MM-dd"/>
                                            <i class="fa fa-times"></i></a>
                                    </c:forEach>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" colspan="2">
                                    <button type="button" onclick="$('#noRelayDateModal').modal('hide');" class="btn btn-danger addForm">关闭</button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>